<!--  -->
<template>
  <div class="title">
    <div class="header">
      <div class="right">SDL assistant</div>
      <div class="left">NOKIA</div>
    </div>
    <el-menu
      mode="horizontal"
      class="sidebar-el-menu"
      text-color="#bfcbd9"
      active-text-color="#20a0ff"
      background-color="#001529"
      router
      :default-active="currentMenu"
    >
      <el-submenu v-for="(item, i) in navList" :index="item.index+''" :key="i">
        <template slot="title">{{item.title}}</template>
        <el-menu-item
          v-for="(itemChild,a) in item.children"
          :index="itemChild.index"
          :key="a"
        >{{itemChild.title}}</el-menu-item>
      </el-submenu>
      <el-submenu index="7" style="float:right">
        <template slot="title">
          <img class="user-logo" src="../../../assets/user.png" alt />
        </template>
        <el-menu-item index="7-1" @click="userAdmin()">用户管理</el-menu-item>
        <el-menu-item index="7-2">角色管理</el-menu-item>
        <el-menu-item index="7-3">账户管理</el-menu-item>
        <el-menu-item index="7-4">日志管理</el-menu-item>
        <el-menu-item index="7-5">License管理</el-menu-item>
      </el-submenu>
    </el-menu>
    <Dialog :show="show" @back="back"></Dialog>
  </div>
</template>

<script>
import Dialog from "@/views/index/components/dialog";
import * as nav from "@/components/navList";
export default {
  name: "",
  props: [""],
  data() {
    return {
      currentMenu: "",
      show: false,
      navList: []
    };
  },
  components: {
    Dialog
  },
  computed: {},
  beforeMount() {},
  mounted() {
    console.log(nav);
    this.getCurrentMenu();
    this.navList = nav.default;
  },
  methods: {
    userAdmin() {
      this.show = true;
    },
    back() {
      this.show = false;
    },
    getCurrentMenu() {
      // 获取当前页面 菜单刷新后能自动选中
      let currentUrl = window.location.href;
      let currentPage = currentUrl.split("/")[4].replace("#", "");
      this.currentMenu = currentPage;
    }
  },
  watch: {
    $route(to, from) {
      this.getCurrentMenu();
    }
  }
};
</script>

<style  scoped>
.title {
  width: 100%;
}
.user-logo {
  width: 25px;
  height: 25px;
}
.header {
  width: 100%;
  height: 15px;
  background: #001529;
  display: flex;
  justify-content: space-between;
  font-weight: 900;
  color: #fff;
  align-items: center;
  font-size: 14px;
}
.el-menu {
  background: #001529;
}
.el-submenu:hover {
  background: #333c58 !important;
}
.el-menu-item.is-active {
  background: #409eff !important;
  color: #fff !important;
}
.el-submenu__title {
  text-align: left;
  padding-left: 20px;
}
.el-menu-item {
  text-align: left;
}
.el-menu-item:hover {
  background: #409eff !important;
}
.header .right {
  margin-left: 20px;
  margin-right: 20px;
}
.header .left {
  margin-left: 20px;
  margin-right: 20px;
}
.el-submenu__title:hover {
  background: #333c58;
}
.is-open {
  background: #333c58;
}
</style>